<template>
    <div class="user-profile">
        <div class="basic-profile" :v-model="userInfo">
            <div class="avatar">
                <!-- <img src="../../assets/avatar.png" alt="">
                <img class="edit" src="../../assets/edit-avatar.png" alt=""> -->
                <el-upload :on-change="avatarChange" :auto-upload="false" class="avatar-uploader" action="#"
                    :show-file-list="false">
                    <img class="img" v-if="imageUrl" :src="imageUrl">
                    <img class="img" v-else src="../../assets/default-avatar.png" alt="">
                    <img class="edit" src="../../assets/edit-avatar.png" alt="">
                </el-upload>
            </div>
            <div class="right">
                <el-form label-position="top" :inline="true" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="userInfo.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="userInfo.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="userInfo.address"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮件">
                        <el-input v-model="userInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                </el-form>
                <!-- <div class="save-btn">
                    <el-button type="primary">保存</el-button>
                </div> -->
            </div>
        </div>
        <!-- 教育经历 -->
        <div class="education">
            <div class="title">
                <h4><i class="el-icon-document"></i>教育经历</h4>
            </div>
            <!-- <el-button class="add" type="primary" icon="el-icon-circle-plus">新增</el-button> -->
            <el-table :data="educationData" style="width: 100%">
                <el-table-column label="入校年月" prop="entryDate"></el-table-column>
                <el-table-column label="毕业年月" prop="graduationDate"></el-table-column>
                <el-table-column label="学校" prop="school"></el-table-column>
                <el-table-column label="专业" prop="major"></el-table-column>
                <el-table-column label="学历" prop="educationalBg"></el-table-column>
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
</el-table-column> -->
            </el-table>
        </div>
        <!-- 职称资格 -->
        <div class="technical ">
            <div class="title">
                <h4><i class="el-icon-document"></i>职称资格</h4>
            </div>
            <!-- <el-button class="add" type="primary" icon="el-icon-circle-plus">新增</el-button> -->
            <el-table :data="technicalData" style="width: 100%">
                <el-table-column label="证书名称" prop="name"></el-table-column>
                <el-table-column label="证书类型" prop="type"></el-table-column>
                <el-table-column label="证书编号" prop="number"></el-table-column>
                <el-table-column label="发证机构" prop="certifyingAuthority"></el-table-column>
                <el-table-column label="发证日期" prop="date"></el-table-column>
                <el-table-column label="级别" prop="rank"></el-table-column>
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <!-- 工作经历 -->
        <div class="work-experience ">
            <div class="title">
                <h4><i class="el-icon-document"></i>工作经历</h4>
            </div>
            <!-- <el-button class="add" type="primary" icon="el-icon-circle-plus">新增</el-button> -->
            <el-table :data="workExperience" style="width: 100%">
                <el-table-column label="入职年月" prop="entryDate"></el-table-column>
                <el-table-column label="离职年月" prop="dimissionDate"></el-table-column>
                <el-table-column label="工作单位" prop="unit"></el-table-column>
                <el-table-column label="担任职务" prop="post"></el-table-column>
                <el-table-column label="工作职责" prop="responsibility"></el-table-column>
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script>
import { listApp } from "@/api/app";
import { getUserById } from "@/api/user"
import { getDptMulti } from "@/api/department"
import { avatarUpload } from "@/api/upload";
import { editUser } from "@/api/user";

export default {
    name: 'user-profile',
    data() {
        return {
            educationData: [{
                entryDate: '2016-05-02',
                graduationDate: "2016-05-02",
                school: "北京大学",
                major: "计算机",
                educationalBg: "本科"
            }, {
                entryDate: '2016-05-02',
                graduationDate: "2016-05-02",
                school: "北京大学",
                major: "计算机",
                educationalBg: "本科"
            }, {
                entryDate: '2016-05-02',
                graduationDate: "2016-05-02",
                school: "北京大学",
                major: "计算机",
                educationalBg: "本科"
            }, {
                entryDate: '2016-05-02',
                graduationDate: "2016-05-02",
                school: "北京大学",
                major: "计算机",
                educationalBg: "本科"
            }],
            technicalData: [{
                name: '名称',
                type: "xxxx",
                number: "1189451654654",
                certifyingAuthority: "xxxxxx",
                date: "2024-10-11",
                rank: "高级"
            }, {
                name: '名称',
                type: "xxxx",
                number: "1189451654654",
                certifyingAuthority: "xxxxxx",
                date: "2024-10-11",
                rank: "高级"
            }, {
                name: '名称',
                type: "xxxx",
                number: "1189451654654",
                certifyingAuthority: "xxxxxx",
                date: "2024-10-11",
                rank: "高级"
            }, {
                name: '名称',
                type: "xxxx",
                number: "1189451654654",
                certifyingAuthority: "xxxxxx",
                date: "2024-10-11",
                rank: "高级"
            }],
            workExperience: [{
                entryDate: 'xxxx',
                dimissionDate: 'xxxx',
                unit: "xxxx",
                post: "xxxxxx",
                responsibility: "xxxxxx",
            }, {
                entryDate: 'xxxx',
                dimissionDate: 'xxxx',
                unit: "xxxx",
                post: "xxxxxx",
                responsibility: "xxxxxx",
            }, {
                entryDate: 'xxxx',
                dimissionDate: 'xxxx',
                unit: "xxxx",
                post: "xxxxxx",
                responsibility: "xxxxxx",
            }, {
                entryDate: 'xxxx',
                dimissionDate: 'xxxx',
                unit: "xxxx",
                post: "xxxxxx",
                responsibility: "xxxxxx",
            }],
            userInfo: {},
            imageUrl: ""//头像
        }
    },
    mounted() {
        // 从缓存获取crp账号
        const crp = localStorage.getItem("CRP")
        this.getUserInfo()
    },
    methods: {
        //获取用户信息
        getUserInfo() {
            const userId = localStorage.getItem("userId")
            if (userId != undefined) {
                getUserById(userId).then(rsp => {
                    if (rsp.code === 200) {
                        const user_v = rsp.data;
                        this.imageUrl = rsp.data.avatar;
                        console.log(rsp)
                        if (user_v.gender === 0) {
                            user_v["gender"] = '未知'
                        } else if (user_v.gender === 1) {
                            user_v["gender"] = '男'
                        } else {
                            user_v["gender"] = '女'
                        }
                        //获取部门信息
                        getDptMulti({ id: rsp.data.departmentId }).then(rsp => {
                            if (rsp.code === 200) {
                                let dptName = rsp.data[0].name
                                user_v["dptName"] = dptName
                                this.userInfo = user_v
                            } else {
                                console.log("getDptMulti抛出异常", rsp.exception)
                            }
                        }).catch(error => {
                            console.log("获取部门信息异常:", error)
                        });

                    } else {
                        console.log("getUserById抛出异常", rsp.exception)
                    }
                }).catch(error => {
                    console.log("通过id获取用户信息异常:", error)
                });
            }
        },
        //修改头像
        avatarChange(file) {
            // 检查文件大小（1MB = 1024 * 1024 字节）
            const maxSize = 1024 * 1024;
            if (file.size > maxSize) {
                this.$message({
                    message: '文件大小不能超过1MB',
                    type: 'error'
                });
                return;
            }
            // 检查文件类型
            const validFormats = ['image/png', 'image/jpeg', 'image/jpg', 'image/bmp'];
            if (!validFormats.includes(file.raw.type)) {
                this.$message({
                    message: '仅支持.png, .jpg, .jpeg, .bmp格式的图片',
                    type: 'error'
                });
                return;
            }

            const formData = new FormData();
            formData.append('type', 'avatar');
            formData.append('file', file.raw);
            avatarUpload(formData).then(res => {
                if (res.code == 200) {
                    let editData = {
                        avatar: res.data.url,
                        id: localStorage.getItem("userId")
                    }
                    editUser(editData).then(rsp => {
                        if (rsp.code == 200) {
                            this.imageUrl = res.data.url;
                            this.$message({
                                message: '头像修改成功',
                                type: 'success'
                            });
                        }
                    })
                } else {
                    // 处理上传头像失败的情况
                    this.$message({
                        message: '上传头像失败',
                        type: 'error'
                    });
                }
            }).catch(error => {
                // 处理上传头像时的错误
                console.error('上传头像时发生错误:', error);
                this.$message({
                    message: '上传头像时发生错误',
                    type: 'error'
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.user-profile {
    margin: 40px 0 0 50px;

    .basic-profile {
        display: flex;

        .avatar {
            width: 120px;
            height: 120px;
            position: relative;
            border-radius: 50%;

            :deep .img {
                width: 120px;
                height: 120px;
                border-radius: 50%;
            }

            .edit {
                position: absolute;
                right: 0px;
                width: 20px;
                bottom: 10px;
            }
        }

        .right {
            flex: 1;
            margin-left: 50px;

            .el-form {
                width: 80%;
                display: flex;
                flex-wrap: wrap;

                .el-form-item {
                    width: 45%;
                    box-sizing: border-box;
                    margin-right: 4%;

                    :deep .el-form-item__label {
                        margin-bottom: 0;
                    }
                }
            }

            .save-btn {
                width: 75%;
                display: flex;
                justify-content: flex-end;

                .el-button {
                    background-color: #2D60FF;
                    width: 150px;
                }
            }
        }

    }

    .education,
    .technical,
    .work-experience {
        margin-top: 20px;
        margin-bottom: 50px;

        .title {
            color: #6C6C6C;
            border-bottom: 1px solid #E5E5E5;
            padding-bottom: 10px;

            i {
                margin-right: 10px;
            }
        }

        .add {
            margin: 15px 0;
        }
    }

}
</style>